<!-- 查询表单 -->
<template>
  <a-form class="search-form" ref="formRef" name="search-form" :model="formData" @submit.prevent="onSearch">
    <a-flex class="search-form-flex" :gap="18" wrap="wrap">
      <!-- 动态渲染搜索项 -->
      <template v-for="(item, i) in searchConfig" :key="i">
        <a-form-item :label="item.title" :name="item.dataIndex">
          <!-- 输入框 -->
          <a-input
            v-if="item.type === 'input'"
            v-model:value="formData[item.dataIndex]"
            :placeholder="`请输入${item.title}`"
            :style="{ width: getWidth(item.width) }"
            allowClear
          />

          <!-- 下拉框 -->
          <a-select
            v-else-if="item.type === 'select'"
            v-model:value="formData[item.dataIndex]"
            :placeholder="`请选择${item.title}`"
            :style="{ width: getWidth(item.width) }"
            :options="item.options"
            allowClear
            showSearch
          />
          <!-- 下拉框多选 -->
          <a-select
            v-else-if="item.type === 'multiple-select'"
            v-model:value="formData[item.dataIndex]"
            :placeholder="`请选择${item.title}`"
            :style="{ width: getWidth(item.width) }"
            :options="item.options"
            mode="multiple"
            allowClear
          />

          <!-- 日期范围 -->
          <a-range-picker
            v-else-if="item.type === 'date-range'"
            v-model:value="formData[item.dataIndex]"
            :placeholder="[`开始${item.title}`, `结束${item.title}`]"
            :style="{ width: getWidth(item.width) }"
          />
        </a-form-item>
      </template>

      <!-- 查询表单按钮 插槽-->
      <a-form-item>
        <a-flex :gap="10">
          <a-button type="primary" html-type="submit" style="margin-right: 8px" @click="onSearch">
            <SearchOutlined /> 查询
          </a-button>
          <a-button @click="onReset"> <ReloadOutlined /> 重置 </a-button>
        </a-flex>
      </a-form-item>
    </a-flex>
  </a-form>
</template>
<script setup lang="ts">
  import { reactive } from 'vue';
  import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';

  // 搜索项配置类型
  export interface SearchFormItem {
    title: string; // 标签文字（对应表格title）
    dataIndex: string; // 字段名（对应表格dataIndex，接口参数名）
    type: 'input' | 'select' | 'date-range' | 'multiple-select'; // 组件类型
    width?: number; // 宽度
    options?: { label: string; value: any }[]; // 下拉选项（select专用）
  }

  // 接收父组件的配置
  const props = defineProps<{
    searchConfig: SearchFormItem[]; // 核心配置数组
  }>();

  // 向父组件传递事件
  const emit = defineEmits<{
    (e: 'search', params: Record<string, any>): void; // 搜索参数
    (e: 'reset'): void; // 重置事件
  }>();

  // 表单数据（根据配置动态初始化）
  const formData = reactive<Record<string, any>>({});
  // 初始化：为每个搜索项创建字段
  props.searchConfig.forEach((item) => {
    formData[item.dataIndex] = undefined;
  });
  const getWidth = (width?: number) => {
    return width !== undefined ? width + 'px' : '200px';
  };
  // 搜索事件
  const onSearch = () => {
    emit('search', { ...formData }); // 传递当前表单数据
  };

  // 重置事件
  const onReset = () => {
    // 清空所有字段
    props.searchConfig.forEach((item) => {
      formData[item.dataIndex] = undefined;
    });
    emit('reset');
  };

  defineExpose({
    formData,
  });
</script>
<style lang="less" scoped>
  .search-form {
    margin-bottom: 24px;

    .search-form-flex {
      :deep(> .ant-form-item) {
        margin-bottom: 0;
      }
    }
  }
</style>
